<template>
  <!-- 新闻页的视频播放 -->
  <div>
    <div class="myVideo">
      <img
        @click="playVideo"
        class="bigImg"
        :src="require(`../../assets/imgs/cl/${title.img}`)"
        alt
      />
      <div @click="playVideo" class="smallImgF">
        <img class="smallImg" src="../../assets/imgs/cl/play.png" alt />
      </div>
      <div class="content">
        <MyTime
          :time="title.publishTime.slice(0, title.publishTime.indexOf('T'))"
          class="timeStyle"
        />
        <p
          @click="
            () => {
              jumpDetail(title.aid);
            }
          "
          class="title"
        >
          {{ title.title }}
        </p>
        <p class="text">
          {{ title.introduce }}
        </p>
      </div>
    </div>
    <!-- 视频播放区 -->
    <div v-if="isPlay" class="playVideo">
      <div @mouseenter="showExit" @mouseleave="hidenExit" class="videoF">
        <video controls="controls" :src="title.video"></video>
        <div v-if="isExit" class="ExitPlay">
          <span @click="ExitPlay">退出播放</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MyTime from "./TimeStyle";
export default {
  name: "NewsVideo",
  props: ["title"],
  data() {
    return { isPlay: false, isExit: false };
  },
  components: {
    MyTime,
  },
  methods: {
    jumpDetail(aid) {
      console.log(aid);
      this.$router.push(`/pc/scienceAticle?article_id=${aid}`);
    },
    playVideo() {
      this.isPlay = true;
    },
    ExitPlay() {
      this.isPlay = false;
    },
    showExit() {
      this.isExit = true;
    },
    hidenExit() {
      this.isExit = false;
    },
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
/* 视屏播放区 */
.playVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(50, 50, 50, 0.8);
  z-index: 999;
}
/* 退出播放 */

.ExitPlay {
  width: 100%;
  height: 40px;
  position: absolute;
  top: -5px;
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.1)
  );
  color: white;
}
.ExitPlay span {
  color: white;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 12px;
}
.ExitPlay span:hover {
  text-shadow: 0px 0px 5px #fff;
}
/* 视屏区 */

.videoF {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.timeStyle {
  margin-left: 20px;
}
.myVideo {
  /* width: 550px; */
  height: 128px;
  border-bottom: 1px solid #aaa;
  position: relative;
  padding: 10px 10px 10px 0;
}
.bigImg {
  width: 180px;
  height: 110px;
  display: block;
  float: left;
  cursor: pointer;
  margin-top: 8px;
}
.smallImgF {
  position: absolute;
  display: block;
  left: 15px;
  bottom: 35px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 50%;
  background-color: rgba(50, 50, 50, 0.6);
}
.smallImg {
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content {
  float: left;
  width: 350px;
}
.text {
  padding-left: 20px;
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.title {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  cursor: pointer;
}
.title:hover {
  color: cornflowerblue;
}
</style>
